<template>
  <div>
    <div class="main-container">
      <div class="operation-bar">
        <div
          class="default-btn primary-btn"
          @click.stop="onSet()"
        >
          设置
        </div>
      </div>

      <div class="table-con">
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            prop="level"
            label="会员等级"
          >
            <template #default="scope">
              {{ 'VIP' + scope.row.level }}
            </template>
          </el-table-column>

          <el-table-column
            label="折扣"
            prop="discount"
          />
        </el-table>
      </div>

      <el-dialog
        v-model="visible"
        :width="400"
        :close-on-click-modal="false"
        title="设置"
      >
        <el-form
          ref="dataFormRef"
          :model="dataForm"
          :rules="dataRule"
          @submit.prevent
        >
          <div
            v-for="(item, index) in vipList"
            :key="index"
          >
            <el-form-item
              :prop="item.level"
              :label="'VIP' + item.level"
            >
              <el-input-number
                v-model="dataForm[item.level]"
                :step="0.01"
                :min="0.01"
                :max="1"
                @change="(v) => item.discount = v"
              />
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <div>
            <div
              class="default-btn"
              @click="visible = false"
            >
              {{ $t("coupon.cancel") }}
            </div>
            <div
              class="default-btn primary-btn"
              @click="onSubmitSet()"
            >
              {{ $t("coupon.confirm") }}
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const defaultSetting = [
  {
    level: 1,
    discount: 0.99
  },
  {
    level: 2,
    discount: 0.98
  },
  {
    level: 3,
    discount: 0.97
  },
  {
    level: 4,
    discount: 0.96
  },
  {
    level: 5,
    discount: 0.95
  },
  {
    level: 6,
    discount: 0.94
  },
  {
    level: 7,
    discount: 0.93
  },
  {
    level: 8,
    discount: 0.92
  },
  {
    level: 9,
    discount: 0.91
  },
  {
    level: 10,
    discount: 0.9
  }
]

const dataList = ref([])
const visible = ref(false)
const vipList = ref([])
const dataForm = ref({})
const dataRule = ref({})
const onSet = () => {
  visible.value = true
  // initVipList()
  nextTick(() => {
    dataFormRef.value.validate()
  })
}

const initVipList = () => {
  vipList.value = dataList.value.map((d, i) => {
    dataForm.value[d.level] = d.discount
    dataRule.value[d.level] = [
      { required: true, message: '折扣不能为空', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (i >= 1) {
            const prev = dataForm.value[i]
            if (value - prev > 0) {
              callback(new Error(`VIP${i + 1}的折扣不能大于VIP${i}的折扣`))
            }
          }
          callback()
        },
        trigger: 'blur'
      }
    ]
    return {
      id: d.id || '',
      shopId: 0,
      level: d.level,
      discount: d.discount
    }
  })
}

const dataFormRef = ref(null)
const onSubmitSet = () => {
  dataFormRef.value.validate((valid) => {
    if (valid) {
      const isUpdate = !!vipList.value[0].id
      http({
        url: http.adornUrl('/shop/memberDiscount/saveBatch'),
        method: isUpdate ? 'put' : 'post',
        data: vipList.value
      }).then(() => {
        ElMessage({
          message: $t('remindPop.success'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            getList()
          }
        })
      })
    }
  })
}

const getList = () => {
  http({
    url: http.adornUrl('/shop/memberDiscount/getListByCond'),
    method: 'get',
    params: http.adornParams({
      shopId: 0,
      sort: 'level'
    })
  }).then((res) => {
    if (res.data && res.data.length) {
      dataList.value = res.data
    } else {
      dataList.value = defaultSetting
    }
    initVipList()
  })
}

onMounted(() => {
  getList()
})
</script>
